<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>redux-counter测试</title>
  </head>
  <body>
    <button id="decrement">-</button>
    <span id="count">0</span>
    <button id="increment">+</button>
    <!-- 引入Redux  https://www.bootcdn.cn/ -->
    <script src="https://cdn.bootcdn.net/ajax/libs/redux/4.1.1/redux.min.js"></script>
    <script>
      //1.定义reducer函数, 2个参数,第一个给默认值，第二个给action对象
      //作用：根据不同的action对象，返回不同的新的state
      // state：管理的数据初始状态，需要使用普通script标签引入Redux而不是ES模块
      //action：对象type标记当前想要做什么样的修改
      function reducer(state = { count: 0 }, action) {
        // 数据不可变: 基于原始状态生成一个新的状态
        switch (action.type) {
          case "INCREMENT":
            return { count: state.count + 1 };
          case "DECREMENT":
            return { count: state.count - 1 };
          default:
            return state;
        }
      }
      // 2.使用reducer函数生成store实例
      const store = Redux.createStore(reducer);

      //3.通过store实例的subscribe订阅数据变化
      //回调函数可以在每次state发生变化的时候自动执行
      store.subscribe(() => {
        console.log("state变化了", store.getState());
        document.getElementById("count").innerText = store.getState().count;
      });

      //4.通过store实例的dispatch涵数提交action更改状态
      const inBtn = document.getElementById("increment");
      inBtn.addEventListener("click", () => {
        //增
        store.dispatch({
          type: "INCREMENT",
        });
      });

      const dBtn = document.getElementById("decrement");
      dBtn.addEventListener("click", () => {
        //增
        store.dispatch({
          type: "DECREMENT",
        });
      });

      //5.通过store实例的getState方法获取最新状态更新到视图中
    </script>
  </body>
</html>
